<template>
	<view class="tabbarDiv">
		<view class="tabbarDivItem" v-for="(item,index) in list" :key="index" @click="jumpTo(item)">
			<image v-if="tabbarValue==item.path" class="u-page__item__slot-icon" :src="item.icon"></image>
			<image v-else class="u-page__item__slot-icon" :src="item.iconActive"></image>
			<span :style="tabbarValue==item.path?'color:#5dbcc2':''">{{item.text}}</span>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';

	export default {
		name: "customTabBar",
		data() {
			return {
				tabbarValue: '/pages/index/index',
				list: [{
						text: "首页",
						path: "/pages/index/index",
						icon: "/static/home.png",
						iconActive: "/static/home1.png"
					},
					{
						text: "目的地",
						path: "/pages/destination/destination",
						icon: "/static/destination.png",
						iconActive: "/static/destination1.png"
					},
					{
						text: "购物车",
						path: "/pages/cart/cart",
						icon: "/static/cart.png",
						iconActive: "/static/cart1.png"
					},
					{
						text: "攻略",
						path: "/pages/strategyGuide/strategyGuide",
						icon: "/static/strategy.png",
						iconActive: "/static/strategy1.png"
					},
					{
						text: "我的",
						path: "/pages/user/user",
						icon: "/static/my.png",
						iconActive: "/static/my1.png"
					}
				]
			};
		},
		watch: {
			// 监听 Vuex 中 counter 的变化
			'$store.state.tabbarValue': {
				handler(newVal, oldVal) {
					this.tabbarValue = newVal
				},
				deep: true // 深度监听对象变化
			}
		},
		mounted() {
			this.tabbarValue = this.$store.state.tabbarValue
		},
		methods: {
			...mapMutations(['settabbarValue']),
			changeData(data) {
				this.tabbarValue = data
			},
			// 跳转
			jumpTo(item) {
				this.settabbarValue(item.path)
				uni.switchTab({
					url: item.path
				})
			}
		}
	}
</script>

<style lang="scss">
	.tabbarDiv {
		width: 90%;
		position: fixed;
		bottom: 40rpx;
		left: 50%;
		border-radius: 57rpx;
		box-shadow: -1px -1px 4px 1px rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
		background-color: #ffffff;
		padding: 20rpx 0;
		justify-content: space-around;
		transform: translate(-50%, 0);

		.tabbarDivItem {
			display: flex;
			align-items: center;
			flex-direction: column;
			font-size: 26rpx;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}


	}
</style>